<template>
	<view class="income-list-box">
		<view v-if="title == '收入记录'" class="money-list">
			<view class="list-box" v-for="(item, i) in incomList" :key='i' >
				<view class="money-item">
					<view class="name">状态: </view>
					<view class="text">{{item.desc || ''}}</view>
				</view>
				<view class="money-item">
					<view class="name">收入金额: </view>
					<view class="text">{{item.amount || ''}}元</view>
				</view>
				<view class="money-item">
					<view class="name">收入时间: </view>
					<view class="text">{{item.create_at | filterDay}}</view>
				</view>
			</view>
		</view>
		<view v-else-if="title == '购课记录'" class="money-list">
			<view class="list-box" v-for="(item, i) in incomList" :key='i' >
				<!-- <view class="money-item">
					<view class="name">状态: </view>
					<view class="text">{{item.desc || ''}}</view>
				</view> -->
				<view class="money-item">
					<view class="name">购课金额: </view>
					<view class="text">{{item.price || ''}}元</view>
				</view>
				<view class="money-item">
					<view class="name">购课时间: </view>
					<view class="text">{{item.created_at | filterDay}}</view>
				</view>
			</view>
		</view>
		<view v-else class="money-list">
			<view class="list-box" v-for="(item, i) in incomList" :key='i' @tap='toPlayVideo(item)'>
				<!-- <view class="money-item">
					<view class="name">状态: </view>
					<view class="text">{{item.desc || ''}}</view>
				</view> -->
				<!-- <view class="money-item">
					<view class="name">购课金额: </view>
					<view class="text">{{item.price || ''}}元</view>
				</view> -->
				<view class="money-item">
					<view class="left-img">
						<image :src="item.shop.cover_url" mode="widthFix"></image>
					</view>
					<view class="right-content">
						<view class="title-box">
							{{item.shop.title || ''}}
						</view>
						<view class="time-box">
							<view class="name">观看时间: </view>
							<view class="text">{{item.created_at | filterDay}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-else class="theItemOff" style="display: flex;justify-content: space-between;box-sizing: border-box;">
			<view class="video-lsits">
				<view class="video-item" v-for="(item, i) in incomList" :key="i" @tap='toPlayVideo(item)'>
					<image class="video-item-img" :src="item." mode="aspectFill"></image>
					<view class="item-img-box">
						<image class="video-item-img" :src="item.shop.cover_url" mode="aspectFill"></image>
					</view>
					<view class="video-item-time">
						<text style="color: #FFFFFF;font-size: 20rpx;">{{item.created_at | filterVideoTime}}</text>
					</view>
					<view class="video-item-desc">
						<text
							style="color: #333333;font-weight: bold;padding-top: 10rpx;">{{item.shop.title || ''}}</text>
						<text style="color: #666666;padding-top: 10rpx;">{{item.describe || ''}}</text>
						<text style="text-align: end;padding-top: 20rpx;color: #737373;"></text>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		timestampToTime,
		follow_status
	} from '@/api/api.js'
	export default {
		data() {
			return {
				// 观看记录列表
				incomList: [],
				title: '', // 页面导航标题，
				query: {
					offset: 1,
					limit: 10
				},
				total: 0
			}
		},
		filters: {
			filterVideoTime(time) {
				if (!time) {
					return ''
				}
				const second = parseInt(time / 60)
				const minute = (time % 60 + '').slice(0, 2)
				return `${second < 10 ? '0' + second : second}:${minute < 10 ? '0' + minute : minute}`
			},
			filterDay(stamp) {
				if (!stamp) return ''
				let time = timestampToTime(stamp * 1000)
			
				// time = time < 1 ? `${time.toFixed(1)}小时前` : `${parseInt(time)}天前`
			
				return time;
			}

		},
		onPullDownRefresh() {
			this.query.offset = 1
			this.incomList = []
			if (this.title == '收入记录') {
				this.getIncomeList(() => uni.stopPullDownRefresh())
			} else if (this.title == '购课记录') {
				this.getcourseList()
			} else {
				this.getWatchList(() => uni.stopPullDownRefresh())
			}

		},
		onReachBottom() {
			console.log('分页')
			if (this.query.offset * this.query.limit >= this.total) return
			this.query.offset++
			if (this.title == '收入记录') {
				this.getIncomeList()
			} else if (this.title == '购课记录') {
				this.getcourseList()
			} else {
				this.getWatchList()
			}
		},
		onLoad(o) {
			this.title = o.title
			this.$nextTick(() => {
				uni.setNavigationBarTitle({
					title: this.title
				})
			})
			// 老师的身份
			if (this.title == '收入记录') {
				this.getIncomeList()
			} else if (this.title == '购课记录') {
				this.getcourseList()
			} else {
				this.getWatchList()
			}
		},
		methods: {
			// 观看记录
			async getWatchList(cb) {
				const res = await this.$http.request('/api/v1/access', this.query, 'GET')
				cb && cb()
				console.log(res)
				if (res.code == 200) {
					this.incomList = [...this.incomList, ...res.data.data]
					this.total = +res.data.pages.count
				}
			},
			// 收入记录
			async getIncomeList(cb) {
				const res = await this.$http.request('/api/v1/member/income', this.query, 'GET')
				cb && cb()
				console.log(res)
				if (res.code == 200) {
					this.incomList = [...this.incomList, ...res.data.data]
					this.total = +res.data.pages.count
				}
			},
			// 购课记录
			async getcourseList() {
				const res = await this.$http.request('/api/v1/member/buys', this.query, 'GET')
				console.log(res)
				if (res.code == 200) {
					this.incomList = [...this.incomList, ...res.data.data]
					this.total = +res.data.pages.count
				}
			},
			toPlayVideo(item) {
				uni.navigateTo({
					url: '/pages/teacher/video-play?videoInfo=' + JSON.stringify(item) + '&state=show'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.income-list-box {
		width: 100%;
		min-height: 100vh;
		background-color: #eeeeee;
	}
	/* 集合列表 */
	.video-lsits {
		padding: 20rpx;
		padding-right: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.video-list-items {
		width: 100%;
		height: 251rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.video-list-items-img {
		width: 240rpx;
		height: 198rpx;
		@include flex-center();
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;

		&>image {
			width: 240rpx;
			border-radius: 20rpx;
		}
	}

	.video-list-items-img-time {
		background-color: rgba(0, 0, 0, 0.4);
		width: 160rpx;
		height: 50rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 20rpx 0 50rpx 0;
	}

	.video-list-items-desc {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		// margin-left: 40rpx;
		width: 366rpx;
		height: 210rpx;
	}

	.video-list-items-desc-price {
		display: flex;
		justify-content: flex-end;
	}

	/* 视频 */
	.video-item {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background-color: #fff;
		border-radius: 20rpx;
		width: 345rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.video-item-time {
		background-color: rgba(0, 0, 0, 0.4);
		width: 140rpx;
		height: 50rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 20rpx 0 50rpx 0;
	}

	.video-item-img {
		width: 345rpx;
		height: 320rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.video-item-desc {
		padding: 20rpx 10rpx;
		display: flex;
		flex-direction: column;
	}

	.videos-left,
	.videos-right {
		width: 345rpx;
	}

	.videos-right {
		padding-left: 0;
		flex-direction: column;
		justify-content: flex-start;
	}

	.videos-right .video-item-img {
		height: 260rpx;
	}
	
	
	.money-list {
		padding: 30rpx 32rpx;
		.list-box {
			width: 690rpx;
			padding: 20rpx 25rpx;
			background-color: #FFFFFF;
			margin-bottom: 25rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
		}
		.money-item {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
			.left-img {
				@include flex-center();
				width: 200rpx;
				height: 200rpx;
				margin-right: 30rpx;
				overflow: hidden;
				& > image {
					width: 100%;
					height: 100%;
				}
			}
			.right-content {
				width: 410rpx;
				height: 200rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				padding: 10rpx 0;
				.time-box {
					// margin-top: 20rpx;
				}
			}
			.name {
				// margin-right: 15rpx;
				// margin-bottom: 20rpx;
			}
			.time-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.text {
					font-size: 18rpx;
				}
			}
		}
	}
</style>
